<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/1/20
  Time: 11:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="#" method="get">
        账号:<input type="text" name="username" id="username"/><span id="span1"></span><br/>
        密码:<input type="password" name="password"/><br/>
        <input type="submit" value="注册"/>
    </form>
    <%--写js--%>
    <script>
        //1.账号绑定失去焦点的事件
        document.getElementById("username").onblur=function () {
            // window.alert("警告")
            //alert("哈哈")
            console.log("吊毛")//控制台打印
            //2.创建对象XMHttpRequest对象 用于和后台服务器进行交互
            let request = new XMLHttpRequest();
            //获取账号的值  getElementById:获取标签中元素的值
            let username = document.getElementById("username").value;
            //alert(username)
            //3.打开连接
            //open(method: string, url: string, async: boolean)
            //method:请求的方式 get/post
            //url:请求资源路径
            //async:是否是异步请求 true是 false不是
            request.open("get","/ajax/registerServlet?username="+username,true)
            //4.发送请求
            request.send();
            //5.处理响应
            //onreadystatechange  当readyState发生变化时候执行的函数
            //readyState  属性存留 XMLHttpRequest的状态
            //readyState == 4 响应已就绪
            //status 200  响应成功
            request.onreadystatechange=function () {
                //判断请求和响应是否成功
                if (request.readyState == 4 && request.status==200){
                    //获取响应的文本
                    var responseText = request.responseText;
                    document.getElementById("span1").innerHTML=responseText;
                }
            }
        }
    </script>
</body>
</html>
